<template>
  <div class="message-wrap">
    <div class="message" v-for="item in notices" :key="item._name">
      <div class="content">{{item.content}}</div>
    </div>
  </div>
</template>

<script>
  const DefaultOptions = {
    duration: 1500,
    type: 'info',
    content: '这是一条信息'
  }
  let mid = 0;

  export default {
    name: 'my_message',
    data() {
      return {
        notices: []
      }
    },
    methods: {
      add(notice = {}) {
        let _name = this.getName();

        notice = Object.assign({
          _name
        }, DefaultOptions, notice);
        
        this.$nextTick(() => {
          this.$set(this, 'notices', [...this.notices, notice])
        })
        
        setTimeout(() => {
          this.removeNotice(_name)
        }, notice.duration)
      },

      getName() {
        return 'msg_' + (mid++)
      },

      removeNotice(_name) {
        let index = this.notices.findIndex(item => item.name === _name);
        this.notices.splice(index, 1)
      }
    }
  }
</script>
